<template>
  <div class="chart" ref="chart03Ref">图表的容器</div>
</template>

<script setup>
import { inject, onMounted, ref, watchEffect, computed } from 'vue'
import { countWages } from '../../../api/salary'
const chart03Ref = ref(null)
const $echarts = inject('echarts')

const searchData = inject('searchData')

const wagesCount = ref([])

const achive = async () => {
  //获取数据
  const res = await countWages(searchData.date)
  Object.assign(wagesCount.value, res.data.wagesCount) //整体赋值

  const result = computed(() => {
    return [
      {
        name: '女',
        type: 'bar',
        data: wagesCount.value.map((item) => item.giantWages) // 提取所有的 bigWages 值
      },
      {
        name: '男',
        type: 'bar',
        data: wagesCount.value.map((item) => item.smallWages) // 提取所有的 bigWages 值
      }
    ]
  })

  // 部门数据
  const data = computed(() => {
    return wagesCount.value.map((item) => item.department)
  })
  if (chart03Ref.value) {
    const myChart = $echarts.init(chart03Ref.value)
    myChart.setOption({
      title: {
        text: '各部门男女工资比较'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: data.value
      },
      series: result.value
    })
  }
}

watchEffect(async () => {
  if (searchData.date) {
    await achive()
  }
})
onMounted(async () => {
  await achive()
})
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
